<template>
  <view class="person-data">
    <!-- 顶部导航栏-->
    <HeaderNav title="个人资料"></HeaderNav>

    <view class="bg"> </view>

    <!-- 面板-->
    <view class="card">
      <!-- 头像 -->
      <view class="card-item" style="padding-top: 50rpx">
        <view class="title"> 头像 </view>
        <view class="right" @click="updateAvatar">
          <image :src="userInfo.userImg"></image>
        </view>
      </view>

      <!-- 用户id-->
      <view class="card-item">
        <view class="title"> 用户id </view>
        <view class="desc">
          <input type="text" disabled v-model="userInfo.userId" />
        </view>
      </view>

      <!-- 昵称-->
      <view class="card-item">
        <view class="title"> 昵称 </view>
        <view class="desc">
          <input type="text" v-model="userInfo.nickName" @input="updateNickName" />
        </view>
      </view>

      <!-- 简介-->
      <view class="card-item" style="padding-bottom: 50rpx">
        <view class="title"> 简介 </view>
        <view class="desc">
          <input type="text" v-model="userInfo.desc" @input="updateDesc" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    req
  } from "../../../utils/request/request";
  import {
    mapState,
    mapMutations
  } from "vuex";
  import {
    uniToast
  } from "../../../utils/uni/uni";
  import {
    toBase64
  } from "../../../utils/image/Base64";
  export default {
    computed: {
      ...mapState("user", ["userInfo"]),
    },
    data() {
      return {};
    },
    methods: {
      ...mapMutations("user", ["EDITUSERINFO"]),
      /* 修改昵称 */
      updateNickName() {

        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (this.userInfo["nickName"].length > 5) {
            uniToast("昵称长度1~5位")
            clearTimeout(this.timer);
            return;
          }
          if (!this.userInfo["nickName"]) return
          req("updateNickName", {
            reqData: {
              nickName: this["userInfo"]["nickName"],
            },
            isToken: true,
            method: "POST",
          }).then(
            ({
              data: res
            }) => {
              if (res["code"] === "C001") {
                this.EDITUSERINFO({
                  nickName: res["nickName"],
                });
              }
              uniToast(res["msg"]);
            },
            (err) => {
              console.log(err);
            }
          );
        }, 500);
      },
      /* 修改简介 */
      updateDesc() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (this.userInfo["desc"].length > 20) {
            uniToast("简介长度1~20位")
            clearTimeout(this.timer);
            return;
          }
          if (!this.userInfo["desc"]) return
          req("updateDesc", {
            reqData: {
              desc: this["userInfo"]["desc"],
            },
            method: "POST",
            isToken: true,
          }).then(
            ({
              data: res
            }) => {
              if (res["code"] === "D001") {
                this.EDITUSERINFO({
                  desc: res["desc"],
                });
              }
              uniToast(res["msg"]);
            },
            (err) => {
              console.log(err);
            }
          );
        }, 500);
      },
      /* 上传头像*/
      updateAvatar() {
        toBase64(({
          imgType,
          serverBase64Img
        }) => {
          req("updateAvatar", {
            reqData: {
              imgType,
              serverBase64Img,
            },
            isToken: true,
            method: "POST",
          }).then(({
            data: res
          }) => {
            this.EDITUSERINFO({
              userImg: res.userImg,
            });
          });
        });
      },
      /* 返回上一级*/
      comeBack() {
        uni.navigateBack();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .person-data {
    background-color: #f7f7f7;
    height: 100vh;
  }

  .bg {
    background-color: #0c34ba;
    height: 230rpx;
  }

  .card {
    padding: 0 20rpx;
    margin: 0 20rpx;
    transform: translateY(-80rpx);
    border-top-right-radius: 20rpx;
    border-top-left-radius: 20rpx;
    background-color: #fff;

    .card-item {
      color: #878787;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      padding: 0 20rpx;
      height: 100rpx;
      border-bottom: 1rpx solid #dddddd;

      &:last-child {
        border-bottom: 1rpx solid transparent;
      }

      input {
        font-size: 24rpx;
        text-align: right;
      }

      .right {
        width: 80rpx;
        height: 80rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
</style>
